<template>
  <el-row style="min-width: 1500px">
    <el-col :span="24">
      <div class="wrap_right_list">
        <div class="wrap_right_list--head-title">
          <text>节目单列表</text>
        </div>
        <div class="wrap_right_list--head-operation">
          <div class="x-flex">
            <div class="x-m-r-12">
              <el-dropdown ref="dropdownEmptys" trigger="contextmenu">
                <el-button
                  size="large"
                  type="primary"
                  @click="auditClick(tableData)"
                  v-has="'programAudit'"
                  >审核</el-button
                >
                <template #dropdown>
                  <div class="x-p-8">请选择节目单</div>
                </template>
              </el-dropdown>
            </div>
            <el-dialog v-model="dialogVisibles" title="温馨提示" width="30%">
              <template #header="{ titleId, titleClass }">
                <div class="my-header">
                  <h4
                    :id="titleId"
                    :class="titleClass"
                    style="display: flex; align-items: center"
                  >
                    <div class="add"></div>
                    <div style="margin: 0 5px">温馨提示</div>
                  </h4>
                </div>
              </template>
              <span>删除的节目单不支持找回，确定要删除当前节目单吗</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisibles = false">取消</el-button>
                  <el-button type="primary" @click="dialogs"> 确定 </el-button>
                </span>
              </template>
            </el-dialog>
            <el-dialog v-model="dialogVisible" title="温馨提示" width="30%">
              <template #header="{ titleId, titleClass }">
                <div class="my-header">
                  <h4
                    :id="titleId"
                    :class="titleClass"
                    style="display: flex; align-items: center"
                  >
                    <div class="add"></div>
                    <div style="margin: 0 5px">温馨提示</div>
                  </h4>
                </div>
              </template>
              <span>清空的节目单不支持找回，确定要清空当前节目单吗</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialog"> 确定 </el-button>
                </span>
              </template>
            </el-dialog>
            <el-dropdown
              ref="dropdownEmpty"
              class="x-m-l-12"
              trigger="contextmenu"
            >
              <el-button
                size="large"
                @click="emptyTable(tableData)"
                v-has="'programEmpty'"
                >清空
              </el-button>
              <template #dropdown>
                <div class="x-p-8">请选择节目单</div>
              </template>
            </el-dropdown>
            <text class="x-m-l-12"
              >已选中{{ multipleSelection.length }}个节目单</text
            >
          </div>
          <div class="-row--search">
            <el-select
              v-model="selectModeValue"
              placeholder="请选择模式"
              size="large"
              style="width: 200px"
              clearable
              @change="selectChang($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="selectStatusValue"
              class="x-m-l-10 x-m-r-10"
              placeholder="请选择状态"
              size="large"
              style="width: 200px"
              clearable
              @change="selectStatusChang($event)"
            >
              <el-option
                v-for="item in optionsStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="search"
              :suffix-icon="Search"
              clearable
              placeholder="请输入名称或者创建用户"
              size="large"
              @change="changInput"
              style="width: 240px; cursor: pointer"
            />
          </div>
        </div>
        <!-- 审核弹框 -->
        <el-dialog v-model="dialogFormVisible" title="审核" width="30%" center>
          <el-select
            style="margin: 0 29%"
            v-model="optionsAudits"
            placeholder="请选择状态"
            @change="auditSelect($event)"
          >
            <el-option
              v-for="item in optionsAudit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="openclick"> 确认 </el-button>
            </span>
          </template>
        </el-dialog>
        <div class="wrap_right_list--table-content">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            :header-cell-style="{ background: '#F6F7F9' }"
            :row-style="{ height: '64px' }"
            height="calc(90vh - 220px)"
            style="width: 100%; z-index: 1"
            @selection-change="handleSelectionChange"
          >
            <template #empty>
              <div class="no-data">
                <el-empty
                  :image="require('../../assets/nothave.png')"
                  style="margin-top: 30%"
                >
                </el-empty>
              </div>
            </template>
            <el-table-column type="selection" width="40" />
            <el-table-column
              label="名称"
              property="programGuidesName"
              show-overflow-tooltip
            />
            <el-table-column label="模式" width="200">
              <template #default="{ row }">
                <div class="x-flex">
                  <span v-if="row.mode == 0">追加模式 </span>
                  <span v-if="row.mode == 1">插播模式 </span>
                  <span v-if="row.mode == 2">替换模式 </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="时间" width="">
              <template #default="{ row }">
                <div class="x-flex">
                  <span>{{ row.programGuidesTime }}s </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="150">
              <template #default="{ row }">
                <div class="x-flex">
                  <el-badge
                    :type="tableStatus.dgeType[row.auditStatus]"
                    class="item"
                    is-dot
                  />
                  <text class="x-m-l-4">{{
                    tableStatus.text[row.auditStatus]
                  }}</text>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="有效时间" width="230">
              <template #default="{ row }">
                <div class="x-flex">
                  <span
                    >{{ row.startDate.slice(0, 10) }} 至
                    {{ row.endDate.slice(0, 10) }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="创建用户"
              property="createdAccount"
              show-overflow-tooltip
              width="200"
            />
            <el-table-column label="操作" width="165">
              <template #default="{ row }">
                <el-button
                  size="small"
                  text
                  type="primary"
                  @click="listEdit(row.id)"
                  style="margin: 0 -10px"
                  v-has="'programEdit'"
                  >详情</el-button
                >
                <el-button
                  v-if="row.auditStatus == 3"
                  size="small"
                  text
                  type="primary"
                  @click="remteClick(row.id)"
                  v-has="'programDelete'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="-pages">
            <el-pagination
              v-model:current-page="currentPages"
              :page-sizes="[10, 20, 30, 40]"
              :total="total"
              background
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted, computed, onBeforeMount, watch } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { ElTable, ElMessage } from "element-plus";
import { useAdvertising } from "@/store/advertisingRoute";
import {
  getguidesprogram,
  removeProgramGuides,
  examinePrexamineogramGuides,
  removeSingle,
} from "@/api/advertising/index";
const router = useRouter();
const store = useAdvertising();
const { currentComponentName } = storeToRefs(store);
// 清空
const dropdownEmpty = ref<any>("");
const dialogVisible = ref(false);
const dialogVisibles = ref(false);
const dropdownEmptys = ref<any>("");
// 审核下拉框
const optionsAudits = ref();
//选择分辨率
const selectModeValue = ref("");
const selectStatusValue = ref("");
// 审核弹框
var dialogFormVisible = ref();
const options = [
  {
    value: "0",
    label: "追加",
  },
  {
    value: "2",
    label: "替换",
  },
  {
    value: "1",
    label: "插播",
  },
];
const optionsStatus = [
  {
    value: "2",
    label: "未审核通过",
  },
  {
    value: "0",
    label: "未审核",
  },
  {
    value: "1",
    label: "审核通过",
  },
  {
    value: "3",
    label: "已过有效期",
  },
];
const optionsAudit = [
  {
    value: "2",
    label: "未审核通过",
  },

  {
    value: "1",
    label: "审核通过",
  },
];
//日期选择
const search = ref("");
//表格数据
const tableData = ref([]);
// 审核状态
const auditStatusl = ref("");
// 审核按钮
const auditClick = async (rows: any) => {
  if (rows) {
    let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
    if (selectGrouping.length > 1) {
      ElMessage({
        message: "只能选择一个节目进行审核",
        type: "warning",
        duration: 1000,
      });
      return;
    }
    if (selectGrouping.length > 0) {
      dialogFormVisible.value = true;
    } else {
      if (!unref(dropdownEmptys)) return;
      dropdownEmptys.value.handleOpen();
    }
  }
};
// 详情按钮
const listEdit = (val: string) => {
  currentComponentName.value = "details";
  localStorage.setItem("edit", val);
};
// 审核弹框确认按钮
const openclick = async () => {
  let data = {
    auditStatus: auditStatusl.value,
    id: tabId.value.join(),
  };
  let res = await examinePrexamineogramGuides(data);
  if (res.data.code == 1) {
    dialogFormVisible.value = false;
    getguidesprograms();
    ElMessage({
      message: res.data.msg,
      type: "success",
      duration: 1000,
    });
  } else {
    ElMessage({
      message: res.data.msg,
      type: "error",
      duration: 1000,
    });
  }
};
// 审核按钮选选择
const auditSelect = (e: any) => {
  auditStatusl.value = e;
};
//分页
const currentPages = ref(1);
var pageSizes = ref(10);
const modes = ref("");
var total = ref("");
var auditStatusd = ref("");
const getguidesprograms = async () => {
  let pageNum = currentPages.value;
  let pageSize = pageSizes.value;
  let mode = modes.value;
  let auditStatus = auditStatusd.value;
  let keyword = search.value;
  let res = await getguidesprogram(
    pageSize,
    pageNum,
    mode,
    auditStatus,
    keyword
  );
  tableData.value = res.data.data.content;
  total.value = res.data.data.totalElements;
};
// 模式搜索
const selectChang = (e: any) => {
  modes.value = e;
  getguidesprograms();
};
// 审核状态搜索
const selectStatusChang = (e: any) => {
  auditStatusd.value = e;
  getguidesprograms();
};
// 用户名和名称搜索
const changInput = () => {
  getguidesprograms();
};
// 监听路由的变化
watch(
  () => router.currentRoute.value,
  (to) => {
    if (to.path == "/advertising/advertisingRelease") {
      getguidesprograms();
    }
  }
);
// 其他组件逻辑...
onBeforeMount(() => {
  getguidesprograms();
}),
  // ...
  onMounted(() => {
    getguidesprograms();
  });
//表单部分
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<programMsgTable[]>([]);
const tabId = ref();
//勾选表单时触发
const handleSelectionChange = (val: programMsgTable[]) => {
  tabId.value = val.map((e) => e.id);
  multipleSelection.value = val;
};
//table状态
const tableStatus = computed(() => {
  const text = {
    1: "审核通过",
    0: "未审核",
    2: "审核未通过",
    3: "已过时效",
  };
  const dgeType = {
    1: "success",
    0: "warning",
    2: "danger",
    3: "info",
  };
  return { text, dgeType };
});
//清空
const emptyTable = async (rows: any) => {
  if (rows) {
    let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
    if (selectGrouping.length > 0) {
      dialogVisible.value = true;
    } else {
      if (!unref(dropdownEmpty)) return;
      dropdownEmpty.value.handleOpen();
    }
  }
};
const dialog = async () => {
  let data = {
    ids: tabId.value,
  };
  let res = await removeProgramGuides(tabId.value);
  if (res.data.code == 1) {
    getguidesprograms();
    dialogVisible.value = false;
    ElMessage({
      message: res.data.msg + "清空已失效节目",
      type: "success",
      duration: 1000,
    });
  } else {
    ElMessage({
      message: res.data.msg,
      type: "error",
      duration: 1000,
    });
  }
};
const ids = ref();
const dialogs = async () => {
  let result = await removeSingle(ids.value);
  if (result.data.code == 1) {
    getguidesprograms();
    dialogVisibles.value = false;
    ElMessage({
      message: result.data.msg,
      type: "success",
      duration: 1000,
    });
  } else {
    ElMessage({
      message: result.data.msg,
      type: "error",
      duration: 1000,
    });
  }
};
// 删除
const remteClick = async (val: any) => {
  dialogVisibles.value = true;
  ids.value = val;
};
const handleSizeChange = (val: number) => {
  pageSizes.value = val;
  getguidesprograms();
};
const handleCurrentChange = (val: number) => {
  currentPages.value = val;
  getguidesprograms();
};
</script>
<style lang="scss" scoped>
.add {
  width: 3px;
  height: 20px;
  /* 主色 */
  background: #0daeff;
  border-radius: 3px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}
::v-deep .el-badge__content.is-dot {
  height: 8px;
  width: 8px;
  padding: 0px;
  right: 0px;
  top: 0px;
  border-radius: 50%;
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.wrap_right_list {
  width: 100%;
  height: calc(100vh - 100px);
  font-size: 14px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  overflow: auto;
  position: relative;

  &--head-title {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #f6f7f9;
    white-space: nowrap;
    font-weight: 500;
  }

  &--head-operation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;

    .-row--search {
      display: grid;
      grid-template-areas: "a b c";
    }

    :deep(.el-form-item__content) {
      max-width: 450px;
    }

    :deep(.el-input__wrapper) {
      width: 450px;
    }

    .-addDialogFormInput {
      :deep(.el-input) {
        max-width: 190px;
      }
    }
  }
  &--table-content {
    .-pages {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
    }

    :deep(.is-background .btn-prev) {
      border: 1px solid var(--el-border-color);
      background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    }

    :deep(.is-background .btn-next) {
      border: 1px solid var(--el-border-color);
      background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    }

    :deep(.el-pager li) {
      border: 1px solid var(--el-border-color);
      background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    }
  }
}
</style>
